<template>
    <div class="app-container">
        <!-- 主体 start -->
        <el-container>
            <el-main height>
                <div>
                    <el-form label-width="100px">
                        <el-row>
                            <el-col :span="8" :offset="0">
                                <el-form-item label="邮箱账号">
                                    <el-input
                                        v-model="search.Rules.Email"
                                        placeholder="请输入邮箱账号"
                                        clearable
                                        :style="{width: '100%'}"
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="24" :offset="0">
                                <el-form-item label="状态">
                                    <el-radio-group v-model="search.Rules.OrderState" size="medium">
                                        <el-radio
                                            v-for="(item, index) in TypeOptions"
                                            :key="index"
                                            :label="item.value"
                                            :disabled="item.disabled"
                                        >{{item.label}}</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-form-item size="large">
                                <el-button type="primary" @click="getList">查 询</el-button>
                            </el-form-item>
                        </el-row>
                    </el-form>
                </div>
                <!-- 表格 start -->
                <el-table
                    border
                    :data="list.List"
                    v-loading="loading"
                    style="width: 100%;margin-top:30px"
                >
                    <el-table-column align="center" prop="Email" label="邮箱账号"></el-table-column>
                    <el-table-column align="center" prop="Trc20Address" label="提笔地址"></el-table-column>
                    <el-table-column align="center" prop="Amount" label="数量"></el-table-column>
                    <el-table-column align="center" prop="ServiceCharge" label="提现手续费"></el-table-column>
                    <el-table-column align="center" prop="OrderState" label="状态">
                        <template slot-scope="scope">
                            <div v-if="scope.row.OrderState==1" style="color:#409EFF">●待审核</div>
                            <div v-if="scope.row.OrderState==2" style="color:#F56C6C">●提币失败</div>
                            <div v-if="scope.row.OrderState==3" style="color:#67C23A">●提币成功</div>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="Remarks" label="备注"></el-table-column>
                    <el-table-column align="center" prop="CreateTime" label="创建时间"></el-table-column>
                    <el-table-column align="center" label="操作" width="200px">
                        <template slot-scope="scope">
                            <el-button
                                type="success"
                                size="mini"
                                @click="showPupop(3,scope.row.Id)"
                            >通过</el-button>
                            <el-button
                                type="danger"
                                size="mini"
                                @click="showPupop(2,scope.row.Id)"
                            >驳回</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="block" style="margin-top:20px">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="search.CurrentPage"
                        :page-sizes="[10, 20, 30, 40,50]"
                        :page-size="search.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="list.TotalCount"
                    ></el-pagination>
                </div>
                <!-- 表格 end -->
            </el-main>
        </el-container>
        <!-- 主体 end -->
        <!-- 查看弹窗 start -->
        <el-dialog
            :title="title"
            :visible.sync="pupopState"
            :close-on-click-modal="false"
            class="edit-form"
        >
            <el-form label-width="100px">
                <el-form-item label="备注">
                    <el-input
                        v-model="row.Remarks"
                        placeholder="请输入备注(可选)"
                        clearable
                        type="textarea"
                        :style="{width: '100%'}"
                    ></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="pupopState = false">关 闭</el-button>
                <el-button type="primary" @click="config">确 认</el-button>
            </span>
        </el-dialog>
        <!-- 查看弹窗 end -->
    </div>
</template>

<script>
import {
    GetWithdrawMoneyList,
    WithdrawMoneyVerify,
} from "../../api/withdrawal";
export default {
    data() {
        return {
            //表格参数
            loading: true,
            list: [],
            search: {
                CurrentPage: 1,
                PageSize: 10,
                Rules: {
                    Email: "",
                    OrderState: 0,
                },
            },
            TypeOptions: [
                {
                    label: "全部",
                    value: 0,
                },
                {
                    label: "待审核",
                    value: 1,
                },
                {
                    label: "已驳回",
                    value: 2,
                },
                {
                    label: "已通过",
                    value: 3,
                },
            ],
            //弹窗参数
            pupopState: false,
            row: {
                id: 0,
                OrderState: 0,
                Remarks: "",
            },
            title: "",
        };
    },
    watch: {},
    created() {
        this.getList();
    },
    methods: {
        //获取用户数据
        getList() {
            this.loading = true;
            GetWithdrawMoneyList(this.search).then((res) => {
                if (res.Code == 200) {
                    this.list = res.Data;
                    this.loading = false;
                }
            });
        },
        //确定
        config() {
            if (this.row.OrderState == 3) {
                //通过
                this.$confirm("是否通过该提币申请", "温馨提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(() => {
                        WithdrawMoneyVerify(this.row).then((res) => {
                            if (res.Code == 200) {
                                this.$message({
                                    message: "已通过",
                                    type: "success",
                                });
                            }
                            this.pupopState=false;
                            this.getList();
                        });
                    })
                    .catch(() => {});
            } else if (this.row.OrderState == 2) {
                //驳回
                this.$confirm("是否驳回该提币申请", "温馨提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(() => {
                        WithdrawMoneyVerify(this.row).then((res) => {
                            if (res.Code == 200) {
                                this.$message({
                                    message: "已驳回",
                                    type: "success",
                                });
                            }
                            this.pupopState=false;
                            this.getList();
                        });
                    })
                    .catch(() => {});
            }
        },
        //弹窗
        showPupop(type, id) {
            this.title = type == 3 ? "通过" : "驳回";
            this.pupopState = true;
            this.row.id = id;
            this.row.OrderState = type;
        },
        handleSizeChange(val) {
            this.search.PageSize = val;
            this.getList();
        },
        handleCurrentChange(val) {
            this.search.CurrentPage = val;
            this.getList();
        },
    },
};
</script>
<style>
.box {
    border: 1px solid #ccc;
    padding: 10px 0;
    margin-top: 20px;
}
.title {
    font-weight: bold;
    margin-left: 20px;
    font-size: 20px;
    padding: 20px 0;
}
</style>
